<template lang="pug">
div
  nav-div
  .flex.jsb.ae
    .flex.js.ae
      h1.ui.header(style="margin: 0 15px 0 0; padding: 0;") {{order.display_id}}
      h2.ui.header(style="margin: 0 15px 0 0; padding: 0;") {{order.status | orderStatus order.category}}
      h2.ui.header(v-if="order.aftermarket.processing", style="margin: 0 15px 0 0; padding: 0;") 售后中
      h3.ui.header(style="margin: 0 15px 0 0; padding: 0;") 类型: {{order.category | orderCategory}}
    .flex.je.ae
      .ui.button(v-if="['view'].includes(mode)", @click="mode = 'edit'") 编辑
      .ui.button(v-if="['edit'].includes(mode)", @click="save") 保存
      .ui.button(v-if="['edit'].includes(mode)", @click="cancelOrder") 取消订单
      .ui.button.negative(v-if="['edit'].includes(mode)", @click="cancel") 取消
  //- .ui.grid.bottom.aligned
  //-   .four.wide.column
  //-     h1.ui.header {{order.display_id}}
  //-   .two.wide.column
  //-     h2.ui.header {{order.status | orderStatus order.category}}
  //-   .two.wide.column
  //-     h3.ui.header {{order.category | orderCategory}}
  //-   .eight.wide.column.right.aligned
  //-     .ui.button(v-if="['view'].includes(mode)", @click="mode = 'edit'") 编辑
  //-     .ui.button(v-if="['edit'].includes(mode)", @click="save") 保存
  //-     .ui.button.negative(v-if="['edit'].includes(mode)", @click="cancel") 取消
  .ui.section.divider
  //- view(
  //-   v-if="['view'].includes(mode)",
  //-   :order="order",
  //- )
  edit(
    v-if="['view'].includes(mode)",
    :order="order",
  )
  edit(
    v-if="['edit'].includes(mode)",
    :order.sync="order",
  )
</template>

<script>
import { getOrder, updateOrder } from '../../vuex/action'
import NavDiv from '../../modules/nav'
import View from './view'
import Edit from './edit'

export default {
  name: 'order',
  components: {
    View,
    Edit,
    NavDiv,
  },
  vuex: {
    getters: {
      orderSource: ({ order }) => order.order,
    },
    actions: {
      getOrder,
      updateOrder,
    }
  },
  data() {
    return {
      order: null,
      mode: 'view',
    }
  },
  computed: {},
  methods: {
    cancelOrder() {
      this.order.status = 'cancelled'
    },
    save() {
      catchError(async() => {
        let data = _.cloneDeep(this.order)
        if (String(data.express_number) !== String(this.orderSource.express_number)) {
          data.notify = confirm('顺丰单号已修改, 是否发送通知?')
        }
        if (!data.notify) {
          data.notify = confirm('将修改订单, 是否发送通知?')
        }
        await this.updateOrder(data)
        await this.getOrder(data.id)
        this.mode = 'view'
      }, '更新成功')
    },
    cancel() {
      this.mode = 'view'
      this.order = _.cloneDeep(this.orderSource)
    },
  },
  route: {
    data({ to: { params: { id }, query: { mode } } }) {
      catchError(async() => {
        await this.getOrder(id)
        if (mode) {
          this.mode = mode
        }
      })
    }
  },
  ready() {
    $(this.$el).find('.dropdown').dropdown({
      on: 'hover'
    })
  },
  watch: {
    orderSource: {
      handler(val, old) {
        this.helper.title(`订单 ${val.display_id}`)
        this.order = _.cloneDeep(val)
      },
      deep: true,
      immediate: true,
    },
  },
}
</script>

<style lang="sass" scoped>
</style>
